<template>
	<u-tabbar activeColor="#fe5341" inactiveColor="#7c7c7c" :value="tabbarIndex" @change="changeTabbar" fixed zIndex="999" placeholder safeAreaInsetBottom>
		<u-tabbar-item :text="item.name" v-for="(item,index) in tabbarList" :key="index"
			:badge="index===0?totalCount:''" :badgeStyle="{backgroundColor: '#ff0000'}">
			<image slot="active-icon" class="img-44" :src="item.actIcon"></image>
			<image slot="inactive-icon" class="img-44" :src="item.icon"></image>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script>
	import icon01 from "../../../assets/tabbar/icon01.png";
	import icon02 from "../../../assets/tabbar/icon02.png";
	import icon03 from "../../../assets/tabbar/icon03.png";
	import actIcon01 from "../../../assets/tabbar/actIcon01.png";
	import actIcon02 from "../../../assets/tabbar/actIcon02.png";
	import actIcon03 from "../../../assets/tabbar/actIcon03.png";
	import {
		TUIStore,
		StoreName
	} from "@tencentcloud/chat-uikit-engine";
	export default {
		props: {
			tabbarIndex: {
				type: Number,
				value: 0
			},
		},
		data() {
			return {
				tabbarList: [{
					name: '消息',
					icon: icon01,
					actIcon: actIcon01,
					url: '/pages/TUIKit/components/TUIConversation/index'
				}, {
					name: '群聊',
					icon: icon03,
					actIcon: actIcon03,
					url: '/pages/TUIKit/components/TUIGroup/index'
				}, {
					name: '通讯录',
					icon: icon02,
					actIcon: actIcon02,
					url: '/pages/TUIKit/components/TUIContact/index'
				}, ],
				totalCount:0
			};
		},
		mounted() {
			TUIStore.watch(StoreName.CONV, {
				totalUnreadCount: (count) => {
					console.log(count, "____未读消息数")
					this.totalCount=count

				},
			});

		},
		methods: {
			//修改
			changeTabbar(e) {
				// 清空当前查看的好友或者群聊信息
				TUIStore.update(StoreName.CUSTOM, "currentContactInfo", {});
				uni.redirectTo({
					url: this.tabbarList[e].url
				})


			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-badge{
		right: 22rpx !important;
	}
</style>